<template>
  <!-- 新增需求单 -->
  <div>
    <!--信息单 -->
    <div>
      <el-row>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="1"
                        style="font-size : 20px;font : blod;color:black">新增需求单</el-menu-item>
          <span class="but">
            <el-button icon="el-icon-edit-outline"
                       :plain="true"
                       @click="save()">保存</el-button>
            <el-button type="primary"
                       icon="el-icon-document"
                       :plain="true"
                       @click="commit()">提交</el-button>
          </span>

          <template>

          </template>

        </el-menu>
        <span>
          <font style="font-size : 15px;margin-left:20px">基本信息</font>
        </span>
      </el-row><br>
      <el-form :inline="true"
               :label-position="left"
               label-width="90px"
               :model="formLabelAlign">
        <el-row>
          <el-col :span="7">
            <el-form-item label="产品线：">
              <el-select v-model="basic.productLine"
                         placeholder="请选择">
                <el-option v-for="item in formLabelAlign.productLine"
                           :key="item.label"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  offset="1">
            <el-form-item label="采购部门：">
              <el-select v-model="basic.category"
                         placeholder="请选择">
                <el-option v-for="item in formLabelAlign.category"
                           :key="item.label"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  offset="1">
            <el-form-item label="仓库：">
              <el-select v-model="basic.warehouse"
                         placeholder="请选择">
                <el-option v-for="item in formLabelAlign.warehouse"
                           :key="item.label"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="制单人：">
              <el-input v-model="basic.prepared"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  offset="1">
            <el-form-item label="需求客户：">
              <el-input v-model="basic.auditor"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  offset="1">
            <el-form-item label="成色：">
              <el-select v-model="basic.fineness"
                         placeholder="请选择">
                <el-option v-for="item in formLabelAlign.fineness"
                           :key="item.label"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="制单时间：">
              <el-input v-model="basic.makingTime"
                        disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  offset="1">
            <el-form-item label="状态：">
              <el-select v-model="status"
                         placeholder="请选择">
                <el-option v-for="item in formLabelAlign.status"
                           :key="item.label"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  offset="1">
            <el-form-item label="单号：">
              <el-input v-model="basic.orderNumber"
                        disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   @select="handleSelect">
            <el-menu-item index="1"
                          style="font-size : 15px;color:black">产品信息</el-menu-item>
            <span class="but">
              <el-button type="primary"
                         icon="el-icon-folder-add"
                         @click="open()">添加</el-button>
            </span>

            <!-- 弹出对话框 -->
            <el-dialog title="产品挑选"
                       :visible.sync="dialogFormVisible"
                       fullscreen="true">
              <el-table ref="multipleTable"
                        :data="gridData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">

                <el-table-column type="selection"
                                 width="55">
                </el-table-column>
                <el-table-column prop="goodsCode"
                                 label="产品编码"
                                 width="200"
                                 align="center">
                </el-table-column>
                <el-table-column prop="goodsName"
                                 label="产品名称"
                                 width="200"
                                 align="center">
                </el-table-column>
                <el-table-column prop="supplier"
                                 label="供应商"
                                 width="200"
                                 align="center">
                </el-table-column>
                <el-table-column prop="gramEnd"
                                 label="克重范围"
                                 width="200"
                                 align="center">
                  <template slot-scope="scope">
                    <el-input style="width: 50px;"
                              v-model="scope.row.gramStart" />
                    ~
                    <el-input style="width: 50px;"
                              v-model="scope.row.gramEnd" />
                  </template>
                </el-table-column>
                <el-table-column prop="weight"
                                 label="重量"
                                 width="150"
                                 align="center">
                  <template slot-scope="scope">
                    <el-input style="width: 50px;"
                              v-model="scope.row.weight" />
                  </template>
                </el-table-column>
                <el-table-column prop="amount"
                                 label="数量"
                                 width="150"
                                 align="center">
                  <template slot-scope="scope">
                    <el-input style="width: 50px;"
                              v-model="scope.row.amount" />
                  </template>
                </el-table-column>
                <el-table-column prop="carft"
                                 label="克效果工艺"
                                 width="150"
                                 align="center">
                </el-table-column>
                <el-table-column prop="specification"
                                 label="规格"
                                 width="150"
                                 align="center">
                </el-table-column>

              </el-table>

                  <!-- 分页 -->
    <el-pagination style="float:right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="1"
                   :page-sizes="[10, 20, 30]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

              <div slot="footer"
                   class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="confirm()">确 定</el-button>
              </div>
            </el-dialog>

          </el-menu>

        </el-row>

      </el-form>
    </div>

    <div>

      <!-- 产品信息表格 -->
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="goodsCode"
                         label="产品编码"
                         width="200"
                         align="center">
        </el-table-column>
        <el-table-column prop="goodsName"
                         label="产品名称"
                         width="200"
                         align="center">
        </el-table-column>
        <el-table-column prop="supplier"
                         label="供应商"
                         width="200"
                         align="center">
        </el-table-column>
        <el-table-column label="克重范围"
                         width="200"
                         align="center">
          <template slot-scope="scope">
            <el-input style="width: 50px;"
                      v-model="scope.row.gramStart" />
            ~
            <el-input style="width: 50px;"
                      v-model="scope.row.gramEnd" />
          </template>
        </el-table-column>
        <el-table-column prop="weight"
                         label="重量"
                         width="100"
                         align="center">
          <template slot-scope="scope">
            <el-input style="width: 50px;"
                      v-model="scope.row.weight" />
          </template>
        </el-table-column>
        <el-table-column prop="amount"
                         label="数量"
                         width="100"
                         align="center">
          <template slot-scope="scope">
            <el-input style="width: 50px;"
                      v-model="scope.row.amount" />
          </template>
        </el-table-column>
        <el-table-column prop="carft"
                         label="克效果工艺"
                         width="100"
                         align="center">
        </el-table-column>
        <el-table-column prop="specification"
                         label="规格"
                         width="100"
                         align="center">
        </el-table-column>
        <el-table-column label="操作"
                         width="100">
          <template slot-scope="scope">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click.native.prevent="deleteRow(scope.$index, tableData)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="float:right"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="80">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      //状态中间转换变量
      status: '',
      //基础信息对象
      basic: {
        //产品线
        productLine: '',
        //品类
        category: '',
        //仓库
        warehouse: '',
        //制单人
        prepared: '',
        //需求客户
        auditor: '',
        //成色
        fineness: '',
        //制单时间
        makingTime: this.getTime(),
        //单号
        orderNumber: this.createOrder(),
        //状态
        status: '',
      },
      //商品信息对象
      goodsInfo: {},
      requisitionForm: {
        basicInfo: {},
        goodsInfo: {},
      },
      //基础信息参数(展示用)
      formLabelAlign: {
        name: '',
        region: '',
        type: '',
        //制单人and审核人
        //credits: '猪猪侠',
        //制单时间
        makingtime: this.getTime(),
        //单号
        ordernum: this.createOrder(),
        //流水线
        productLine: [
          {
            label: '1号流水线',
          },
          {
            label: '2号流水线',
          },
          {
            label: '3号流水线',
          },
          {
            label: '4号流水线',
          },
        ],
        //采购部门
        category: [
          {
            label: '精品柜A',
          },
          {
            label: '精品柜B',
          },
          {
            label: '精品柜C',
          },
          {
            label: '精品柜D',
          },
          {
            label: '精品柜E',
          },
          {
            label: '精品柜F',
          },
        ],
        //仓库
        warehouse: [
          {
            label: '成都1号仓',
          },
          {
            label: '成都2号仓',
          },
          {
            label: '成都3号仓',
          },
          {
            label: '成都4号仓',
          },
        ],
        //成色
        fineness: [
          {
            label: '999足金',
          },
          {
            label: '99足金',
          },
          {
            label: '千足金',
          },
          {
            label: '万足金',
          },
        ],
        //状态
        status: [
          {
            label: '草稿',
          },
          {
            label: '定稿',
          },
        ],
        //采购部门
        auditor: '',
      },
      //产品信息展示
      tableData: [],
      // 添加商品信息
      dialogTableVisible: false,
      dialogFormVisible: false,
      gridData: [],
      multipleSelection: [],
            //分页
      pageNum:1,
      pageSize:10,
      total:null,
    }
  },
  //方法区
  methods: {
    //分页
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.open()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.open()
    },

    //获取当前制表时间
    getTime() {
      var date1 = new Date()
      var year = date1.getFullYear()
      var month = date1.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      var day = date1.getDate()
      if (day >= 1 && day <= 9) {
        day = '0' + day
      }
      var hours = date1.getHours()
      if (hours >= 1 && hours <= 9) {
        hours = '0' + hours
      }
      var minutes = date1.getMinutes()
      if (minutes >= 1 && minutes <= 9) {
        minutes = '0' + minutes
      }
      var seconds = date1.getSeconds()
      if (seconds >= 1 && seconds <= 9) {
        seconds = '0' + seconds
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },

    //生成订单号
    createOrder() {
      var date = new Date()
      var ordernum = 'RK' + date.getTime()
      //console.log(date)
      return ordernum
    },

    //提交获取参数
    commit() {
      var a = this.basic
      if (
        a.productLine == '' ||
        a.category == '' ||
        a.warehouse == '' ||
        a.prepared == '' ||
        a.auditor == '' ||
        a.fineness == '' ||
        a.makingTime == '' ||
        a.orderNumber == '' ||
        this.status == ''
      ) {
        this.$alert('请完善所有表单信息', '需求单填写提示', {
          confirmButtonText: '确定',
        })
        //弹出提示框，请输入
        //alert("aaa");
        return
      } else {
        //状态的值的转换
        if (this.status == '草稿') {
          this.$confirm('草稿只能保存，无法提交', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          return
        } else {
          //状态码1，表示定稿
          
          this.basic.status = 1

          //console.log(this.basic.status)
          this.requisitionForm.basicInfo = this.basic

          this.requisitionForm.goodsInfo = this.tableData
          //console.log(this.requisitionForm)
          //发送请求，将信息添加进数据库

          this.axios({
            method: 'post',
            url: this.baseUrl + 'requisitionForm/addOrder',
            data: this.requisitionForm,
          }).then((res) => {
            console.log(res)
            if (res.data.code == 200) {
              //提示消息
              this.$message({
                message: '需求单提交成功',
                type: 'success',
              })
              this.$router.push({ path: 'demandList' })
            } else {
              this.$message.error('需求单提交失败')
            }
          })
        }
      }
    },

    //保存草稿
    save() {
      //console.log('我进save了吗?')
      var a = this.basic
      if (
        a.productLine == '' ||
        a.category == '' ||
        a.warehouse == '' ||
        a.prepared == '' ||
        a.auditor == '' ||
        a.fineness == '' ||
        a.makingTime == '' ||
        a.orderNumber == '' ||
        this.status == ''
      ) {
        this.$alert('请完善所有表单信息', '需求单填写提示', {
          confirmButtonText: '确定',
        })
        //弹出提示框，请输入
        return
      } else {
        //状态的值的转换
        if (this.status == '定稿') {
          this.$confirm('定稿只能提交，无法保存', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          return
        } else {
          //状态码2，表示草稿
          
          this.basic.status = 2

          //console.log(this.basic.status)
          this.requisitionForm.basicInfo = this.basic

          this.requisitionForm.goodsInfo = this.tableData
          //console.log(this.requisitionForm)
          //发送请求，将信息添加进数据库

          this.axios({
            method: 'post',
            url: this.baseUrl + 'requisitionForm/addOrder',
            data: this.requisitionForm,
          }).then((res) => {
            console.log(res)
            if (res.data.code == 200) {
              //提示消息
              this.$message({
                message: '需求单草稿保存成功',
                type: 'success',
              })
              this.$router.push({ path: 'demandList' })
            } else {
              this.$message.error('需求单保存失败')
            }
          })
        }
      }
    },

    //添加商品弹出框
    open() {
      this.dialogFormVisible = true
      this.axios
        .get(this.baseUrl + 'goodsInfo/findAllGoodsInfo', {
          params: {
       pageNum : this.pageNum,
       pageSize : this.pageSize,
          },
        })
        .then((res) => {
          this.gridData = res.data.data.list;
          this.total = res.data.data.total;
        })
    },

    //获取选择的产品信息
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    //点击确认把数据放到产品信息里面
    confirm() {
      this.dialogFormVisible = false
      //this.$data.multipleSelection = this.tableData;
      //console.log(this.$data.multipleSelection)
      var data = this.multipleSelection
      data.forEach((element) => {
        //console.log(element);

        //将的单个商品添加到数组中
        this.tableData.push(element)
        //console.log(this.tableData)
      })
    },

    //删除当前行
    deleteRow(index, rows) {
      rows.splice(index, 1)
      var goodsInfo = this.tableData
    },
  },

  created() {
    var username = '迪迦'
    this.basic.prepared = username
  },
}
</script>

<style scoped>
.but {
  float: right;
}
</style>